<template>
	<div>
		<van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="router.push('/home')" />
		<div v-if="flag">
			<van-checkbox v-model="checked" v-for="item in list" :key="item" @click="change(item)">
				<van-swipe-cell>
					<van-card
						:num="item.num"
						:price="item.originprice"
						:title="item.proname"
						:thumb="item.img1"
						class="goods-card"
					></van-card>
					<template #right>
						<van-button square text="删除" type="danger" class="delete-button" @click="del(item.cartid)" />
					</template>
					
				</van-swipe-cell>
			</van-checkbox>
			
		</div>
		<van-empty description="购物车无内容" v-else>
			<van-button round type="danger" class="bottom-button" @click="router.push('/home')">立即购物</van-button>
		</van-empty>
		<!-- 可能你还想要 -->
		<div class="botton">
			<h4>可能你还想要</h4>
			<ul>
				<li v-for="item in list2" :key="item"
					@click="router.push({ path: `/details/${item.proid}`, query: { proid: item.proid } })">
					<img :src="item.img1" />
					<p>{{ item.proname }}</p>
					<h4><span>￥</span>{{ item.originprice }}</h4>
				</li>
			</ul>
		</div>
		<van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
			<van-checkbox v-model="checked">全选</van-checkbox>
		</van-submit-bar>
	</div>
</template>

<script setup lang='ts'>
import { Cart, CartDel, CartMay } from '@/api/loginapi';
import { ref, onMounted,computed } from 'vue';

// pinia 仓库
import { useUserStore } from '@/store/userStore';

import { useRouter } from 'vue-router';

const router = useRouter()


const list: any = ref([])
const list2: any = ref([])

const flag = ref(true)

// const checked = ref(true)

const userStore = useUserStore()

onMounted(() => {
	// 购物车列表
	Cart({ userid: userStore.userId }).then((res: any) => {
		console.log(res);
		if (res.code == 10020) {
			flag.value = false
		} else if (res.code == 200) {
			flag.value = true
			list.value = res.data
		}
	})

	// 可能你想要
	CartMay({ count: 1 }).then((res: any) => {
		console.log("000", res);
		list2.value = res.data
	})
})

// 提交订单
const onSubmit = () => {

}

const checked = computed(()=>{

})

const change = (item:any) => {

}

// 删除
const del = (e:string) => {
	CartDel({cartid:e}).then((res)=>{
		console.log(res);
		router.push('/cart')
	})
}



</script>

<style lang="scss" scoped>
.bottom-button {
	width: 100px;
	height: 40px;
	margin-top: 30px;
}

.botton {
	h4 {
		text-align: center;
		font-size: 14px;
		font-weight: 300;
		margin: 16px 0;
		color: #666;
	}

	ul {
		width: 92%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		li {
			width: 49%;
			border-radius: 6px;
			background-color: white;
			margin-bottom: 10px;

			img {
				width: 100%;
			}

			p {
				font-size: 13px;
				line-height: 16px;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			h4 {
				font-size: 18px;
				color: red;
				font-weight: 600;
				line-height: 28px;
				text-align: left;

				span {
					font-size: 16px;
				}
			}
		}
	}
}
:deep(.van-card__content){
	width: 220px;
}
.goods-card {
    margin: 0;
    background-color: white;
  }

  .delete-button {
    height: 100%;
  }
</style>